<template>
    <div >
        <div class="title">手机登录</div>
        <div class="title2" style="font-size:20px"><big> 欢迎登录优优</big></div><br>
        <div class="lala">
            <div class="diop">
               <small> +86</small>
            </div>
            <div class="phone">
                <input class="mobile" placeholder="请输入手机号">
            </div>
            
        </div>
        <div class="didi">
            <div class="opop">
                <input class="code" placeholder="请输入验证码">
                <el-button type="text" @click="open">获取验证码</el-button>
            </div>
        </div>
        <div><small style="color:darkgray">未注册手机验证后即完成注册</small> </div>
        <div class="btnn">
            <el-button type="success" round class="btn" @click="login">登录</el-button>
        </div>
        <div class="text">
            <small>其他方式登录</small> 
        </div>
        <div>
            <img src="" alt="">
        </div>
    </div>
    
</template>

<script>
export default {
    name: 'LoginView',
    data() {
        return {
            mobile:"",
            code:'',
        };
    },
    props: {},

    components: {},

    created() {},

    mounted() {},

    methods: {
      login(){
        this.$router.push("/")
      }
    },

    computed: {},

    watch: {},

    directives: {},

    filters: {}
};
</script>

<style scoped >
    .diop{
        width: 10%;
    }
    .title{
        text-align: center;
        margin-bottom: 20px ;
    }  
  .lala{
    display: flex;
    border-bottom: 1px solid #666;
    margin-bottom: 30px;
    justify-content: space-between;
    width: 100%;
    align-items: center;
  }
  .mobile{
    border:none;
    margin: 10px;
    outline:none;
    width: 300px;
  }
  .diop{
    width: 10%;
    margin-left: 10px;
  }
  .phone{
    width: 100%;
  }
  .didi{
    display: flex;
    border-bottom: 1px solid #666;
    /* justify-content: space-between; */
    margin-bottom: 10px;
    width: 100%;
  }
  .code{
    border:none;
    /* margin: 10px; */
    width: 300px;
    outline: none;
  }
  .btnn{
    margin-top: 100px;
    text-align: center;
  }
  .btn{
    width: 90%;
  }
  .text{
    text-align: center;
  }
  .opop{
    display: flex;
    justify-content: space-between;
  }
</style>
